<%@ page import="com.pixiv.Entity.User" %>
<%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2021/11/8
  Time: 18:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<html>
<head>
    <title>网站</title>
    <link rel = "stylesheet" href = "${pageContext.request.contextPath}/pixiv/css/header.css">
    <link rel = "stylesheet" href = "${pageContext.request.contextPath}/pixiv/css/index_position.css">
    <link rel = "stylesheet" href = "${pageContext.request.contextPath}/common/layui/css/layui.css">
    <script src = "${pageContext.request.contextPath}/common/jquery3.6.0.js"></script>
    <script src = "${pageContext.request.contextPath}/common/layui/layui.js"></script>
    <script src = "${pageContext.request.contextPath}/pixiv/js/index_send_ajax.js"></script>
</head>
<body>
<%
    User u = (User) session.getAttribute("GLOBAL_USER_OBJECT");
%>

<script type = "text/javascript">
    function sendAjaxPacket(url,target,pictureName)
    {
        $.ajax({
            url:url,
            data:{},
            dataType:"json",
            type:"post",
            success:function(req)
            {

                var bigDiv = document.querySelector(target);

                if (req.flag == 0)
                    return ;

                var lst = req.titles;
                for (var i = 0;i<lst.length;i++)
                {
                    var title = lst[i];
                    var div1 = document.createElement("div");
                    div1.setAttribute("class","pointToTitle");
                    div1.setAttribute("uuidsave",title.titleUUID);

                    var div1_sub1 = document.createElement("div");
                    var img = document.createElement("img");
                    img.setAttribute("src",pictureName + "?id=" + title.titleUUID);
                    div1_sub1.appendChild(img);
                    div1.appendChild(div1_sub1);

                    var div1_sub2 = document.createElement("div");
                    div1_sub2.append(title.titleCaption);
                    div1.appendChild(div1_sub2);

                    var label = document.createElement("div");
                    label.append("123");
                    div1.appendChild(label);
                    bigDiv.appendChild(div1);

                }

            }
        });
    }
</script>


<div id = "left_topInformation">
    <div>
        <i id = "pointToRight" class="layui-icon" style="
            cursor:pointer;width:39px;height:39px;float:left;margin-left:25px;margin-top:11px;">&#xe857;</i>
        <div>公告</div>
        <div id = "noticeDiv">
        </div>
        <script type = "text/javascript">
            initNotices("${pageContext.request.contextPath}/position/getNotices");
        </script>
    </div>
    <style type = "text/css">
        #left_topInformation{
            width:100%;
            height:100%;
            position:fixed;
            left:0px;
            top:0px;
            background-color:rgba(0,0,0,0.25);
            z-index:20;
            display:none;
        }
        #left_topInformation>div:nth-child(1){
            width:150px;
            height:100%;
            position:fixed;
            left:0px;
            top:0px;
            background-color:rgba(255,255,255,0.9);
        }
        #noticeDiv{
            width:150px;
            height:80%;
            margin-top:50px;

        }
        #noticeDiv>div{
            width:125px;
            height:100px;
            border-top:1px solid rgba(140,140,146,1.0);
        }
    </style>
    <script type = "text/javascript">
        //关闭公告
        document.querySelector("#pointToRight").onclick = function(){
            var left = document.querySelector("#left_topInformation");
            left.style.display = "none";
        }
    </script>
</div>
<div id = "head_test_0">
    <div class="layui-main layui-container">
        <div class="layui-col-md4">
            <!--<img style = "float:left;border:1px solid black;" src = "" width = "39px" height = "39px">-->
            <i id = "pointToLeft" class="layui-icon">&#xe857;</i>
            <img id = "gotoPosition" src = "${pageContext.request.contextPath}/pixiv/img/pixiv.png"
                 width = "120px";height = "65px"  >
            <script type = "text/javascript">
                document.querySelector("#gotoPosition").onclick = function(){
                    location.href = "${pageContext.request.contextPath}/position/gotoPosition";
                }
            </script>

            <div style = "line-height:49px;float:left;"></div>

        </div>
        <div class="layui-col-md3">
            <div class="layui-input-inline">
                <input type="tel" id="search" lay-verify="required|phone" autocomplete="off" class="layui-input"
                       style = "margin-top:3px;margin-left:10px;">
                <i class="layui-icon" id = "searchIcon" style = "position: relative;left:213px;top:-38px;">&#xe615;</i>
            </div>
        </div>
        <div class="layui-col-md5">

            <ul class="layui-nav" style = "background-color:ghostwhite;flex-wrap:wrap;">
                <li style = "position:relative;left:10px;top:0px;">
                    <input type = "button" value = "投稿" id = "upPictureToTarget"><!--按钮-->
                </li>
                <li class="layui-nav-item" style = "position:relative;left:165px;top:-47px;">
                    <img src="${pageContext.request.contextPath}/user/getUserIcon" id = "UserIconDisplay" class="layui-nav-img">
                    <dl class="layui-nav-child" style = "width:150px;margin-left:-40px;margin-top:-16px;">

                        <img src = "${pageContext.request.contextPath}/user/getUserIcon"
                             style = "width:75px;height:75px;border-radius:35px;border:0px;">
                        <dd style = "color:rgba(20,20,20,0.7);">账号id:<%out.write(String.valueOf(u.getUserID()));%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);">用户姓名:<%out.write(u.getName() );%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);">e-mail:<%out.write(u.getEMail() );%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/position/gotoSetUser">设置</a></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/position/gotoMyTitle">查看我的图库</a></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/Login/gotoLogin">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <script type = "text/javascript">
        //投稿按钮
        document.querySelector("#upPictureToTarget").onclick = function(){
            location.href = "${pageContext.request.contextPath}/auditTitle/upload";
        }
        //跳转个人界面
        document.querySelector("#UserIconDisplay").onclick = function(){
            location.href = "${pageContext.request.contextPath}/position/gotoSetUser";
        }
        //显示公告
        document.querySelector("#pointToLeft").onclick = function(){
            var left = document.querySelector("#left_topInformation");
            left.style.display = "block";
        }
    </script>
    <script type = "text/javascript">
        var searchIcon = document.querySelector("#searchIcon");
        searchIcon.onclick = function(){
            var context = $('#search').val();
            location.href = "${pageContext.request.contextPath}/search/find?context=" + context;
        }
    </script>
</div>


<div id = "head_test_label">
    <div class="layui-main layui-container">

        <div id = "labelList">
        </div>
        <script type = "text/javascript">
            initLabels("${pageContext.request.contextPath}/position/getLabels");
        </script>
    </div>
</div>

<div id = "head_test_switch">
    <div class="layui-main layui-container" style = "width:1100px;height:300px;margin-top:100px;overflow:hidden;">
        <div style = "position:relative;left:20px;margin:0px;padding:0px;width:1030px;height:310px;overflow:hidden;"
             id = "switchPicture">
            <div style = "width:10000px;margin-left: 0px;overflow:hidden;" id = "switchPictureSaveTemp">
            </div>
        </div>
        <i id = "switchLeftMove" class="layui-icon">&#xe65a;</i>
        <i id = "switchRightMove" class="layui-icon">&#xe65b;</i>
    </div>
    <script type = "text/javascript">
        sendAjaxPacket("${pageContext.request.contextPath}/position/getNewTitle",
            "#switchPictureSaveTemp",
        "${pageContext.request.contextPath}/title/getTitleFristP");
        //switchPictureSaveTemp
    </script>
    <style type = "text/css">
        #head_test_switch{
            width:100%;
            height:300px;

        }
        #switchPicture>div:nth-child(1)>div{
            width:300px;
            height:299px;
            float:left;
            margin-left:5px;
            margin-right:5px;
            margin-top:10px;
            cursor:pointer;
        }
        #switchPicture>div:nth-child(1)>div>div:nth-child(1){
            width:250px;
            height:250px;
        }
        #switchPicture>div:nth-child(1)>div>div:nth-child(1)>img{
            size:250px;
            width:300px;
            height:250px;
            margin:0px;
            padding:0px;

        }
        #switchLeftMove{
            width: 20px;
            height: 300px;
            float: left;
            margin-top: -300px;
            margin-left: 0px;
            line-height: 300px;
            background-color:rgba(0,0,0,0.1);
        }
        #switchLeftMove:hover{
            background-color:rgba(0,0,0,0.2);
        }
        #switchRightMove{
            width: 20px;
            height: 300px;
            float: right;
            margin-top: -300px;
            margin-left: 0px;
            line-height: 300px;
            background-color:rgba(0,0,0,0.1);

        }
        #switchRightMove:hover{
            background-color:rgba(0,0,0,0.2);
        }
    </style>

    <script type = "text/javascript">

        var movePos = 0;
        setInterval(
            function()
            {
                if (movePos == 0)
                    return ;

                var div = $("#switchPicture>div:nth-child(1)");
                var div_left =  parseInt(div.css("margin-left"));

                var result = div_left + movePos;
                if (result > 0)
                    result = 0;
                if (result < -600)
                    result = -600;
                div.css("margin-left",result + "px");
            },(1000 / 24)
        )
        document.querySelector("#switchLeftMove").onmouseover = function(){
            movePos = 10;
        }
        document.querySelector("#switchLeftMove").onmouseout = function(){
            movePos = 0;
        }
        document.querySelector("#switchRightMove").onmouseover = function(){
            movePos = -10;
        }
        document.querySelector("#switchRightMove").onmouseout = function(){
            movePos = 0;
        }
    </script>

</div>

<div id = "content_test_1">
    <div class="layui-main layui-container" style = "width:1100px;height:200px;margin-top:50px;">
        <div>
            <p>我的</p>
        </div>
        <div style = "width:1000px;position:relative;left:50px;height:200px;" id = "UserPicture">
        </div>
    </div>
    <script type = "text/javascript">
        sendAjaxPacket("${pageContext.request.contextPath}/position/getUserTitle",
            "#UserPicture",
            "${pageContext.request.contextPath}/title/getTitleFristP");
    </script>
</div>

<div id = "content_test_2">
    <div class="layui-main layui-container" style = "width:1100px;height:300px;margin-top:50px;
            margin-top:0px;">
        <div>
            <p>其他用户</p>
        </div>
        <div style = "width:1000px;position:relative;left:50px;height:200px;" id = "EtcPicture">
        </div>
    </div>

    <script type = "text/javascript">
        sendAjaxPacket("${pageContext.request.contextPath}/position/getEtcTitle",
            "#EtcPicture",
            "${pageContext.request.contextPath}/title/getTitleFristP");
    </script>

</div>

<div id = "content_test_3">
    <div class="layui-main layui-container" style = "width:1100px;height:300px;margin-top:50px;
            margin-top:0px;">

    </div>
</div>

<style type = "text/css">
    .pointToTitle:hover{
        background-color:rgba(0,0,0,0.1);
    }
</style>

<script type = "text/javascript">

    function applayTitleOnclickEvent()
    {
        var lst = document.querySelectorAll(".pointToTitle");
        //console.log(lst.length);
        for(var i = 0;i<lst.length;i++)
        {
            var obj = lst[i];
            obj.onclick = function(){
                var uuid = this.getAttribute("uuidsave");
                $.ajax({
                    url:"${pageContext.request.contextPath}/position/initOpenTitle",
                    data:{UUID:uuid},
                    dataType:"json",
                    type:"post",
                    success:function(req) {
                        if (req.flag == 1)
                            location.href = "${pageContext.request.contextPath}/position/switchTitle";
                    }
                });
            }
        }
    }

    setInterval("applayTitleOnclickEvent()",1000);

</script>

</body>
</html>